*{
	margin: 0px;
	padding: 0px;
}
body{
	perspective: 800px;
	background-color: #008000;
}
img{
	width: 200px;
	height: 200px;
}
.box{
	width: 200px;
	height: 200px;
	margin: auto;
	margin-top: 200px;
	position: relative;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(30deg);
	animation: a 20s linear infinite;
}
@keyframes a{
	100%{transform: rotateX(-30deg) rotateY(900deg);}
}
.box div{
	width: 200px;
	height: 200px;
	font-size: 50px;
	/* border: 1px solid gray; */
	text-align: center;
	line-height: 200px;
	position: absolute;
	top: 0px;
	left: 0px;
	transition: all 3s;
}
.box:hover .top{
	transform: rotateX(90deg) translateZ(200px);
}
.box:hover .bottom{
	transform: rotateX(-90deg) translateZ(200px);
}
.box:hover .left{
	transform: rotateY(-90deg) translateZ(200px);
}
.box:hover .right{
	transform: rotateY(90deg) translateZ(200px);
}
.box:hover .front{
	transform: translateZ(200px);
}
.box:hover .back{
	transform: translateZ(-200px);
}
.top{
	/* 旋转之后，坐标系会跟着旋转 */
	transform: rotateX(90deg) translateZ(100px);
	background-color: red;
}
.bottom{
	transform: rotateX(-90deg) translateZ(100px);
	background-color: green;
}
.left{
	transform: rotateY(-90deg) translateZ(100px);
	background-color: orange;
}
.right{
	transform: rotateY(90deg) translateZ(100px);
	background-color: aqua;
}
.front{
	transform: translateZ(100px);
	background-color: blue;
}
.back{
	transform: translateZ(-100px);
	background-color: gold;
}
.xing{
	font-size: 80px!important;
	color: red;
	animation: b 5s linear infinite;
}
@keyframes b{
	100%{transform: rotateY(3600deg);}
}